import Head from "next/head"; import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import Content from "../../../components/home/content"; import Modal from "../../../components/modal"; import { signIn, useSession } from "next-auth/react"; import AniList from "../../../components/media/aniList"; import ListEditor from "../../../components/listEditor"; import { ToastContainer } from "react-toastify"; import DetailTop from "../../../components/anime/mobile/topSection"; import AnimeEpisode from "../../../components/anime/episode"; import { useAniList } from "../../../lib/anilist/useAnilist"; import Footer from "../../../components/footer"; import { mediaInfoQuery } from "../../../lib/graphql/query"; import MobileNav from "../../../components/shared/MobileNav"; import redis from "../../../lib/redis"; import Characters from "../../../components/anime/charactersCard"; export default function Info({ info, color }) { const { data: session } = useSession(); const { getUserLists } = useAniList(session); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [domainUrl, setDomainUrl] = useState(""); const [watch, setWatch] = useState(); const [open, setOpen] = useState(false); const { id } = useRouter().query; const rec = info?.recommendations?.nodes?.map( (data) => data.mediaRecommendation ); useEffect(() => { handleClose(); async function fetchData() { setLoading(true); if (id) { try { setDomainUrl(window.location.origin); setProgress(0); setStatuses(null); if (session?.user?.name) { const res = await getUserLists(info.id); const user = res?.data?.Media?.mediaListEntry; if (user) { setProgress(user.progress); const statusMapping = { CURRENT: { name: "Watching", value: "CURRENT" }, PLANNING: { name: "Plan to watch", value: "PLANNING" }, COMPLETED: { name: "Completed", value: "COMPLETED" }, DROPPED: { name: "Dropped", value: "DROPPED" }, PAUSED: { name: "Paused", value: "PAUSED" }, REPEATING: { name: "Rewatching", value: "REPEATING" }, }; setStatuses(statusMapping[user.status]); } } } catch (error) { console.error(error); } finally { setLoading(false); } } } fetchData(); }, [id, info, session?.user?.name]); function handleOpen() { setOpen(true); document.body.style.overflow = "hidden"; } function handleClose() { setOpen(false); document.body.style.overflow = "auto"; } return ( <> {info ? info?.title?.romaji || info?.title?.english : "Retrieving Data..."} handleClose()}>
{!session && (
Edit your list
)} {session && info && ( )}
{info?.bannerImage && ( banner anime )}
{info?.characters?.edges && (
)} {info && rec?.length !== 0 && (
)}